<template>
  <div class="cube-wrap">
    <div class="out-cube" :class="[open ? 'open' : '']" @click="onClick">
      <div class="out-face front">菜鸟科技</div>
      <div class="out-face back">EP</div>
      <div class="out-face left">SC</div>
      <div class="out-face right">STORJ</div>
      <div class="out-face top">VSYS</div>
      <div class="out-face bottom">ZV</div>
    </div>

    <div class="in-cube">
      <div class="in-face front"><img src="@/assets/imgs/rk-logo.png" /></div>
      <div class="in-face back"><img src="@/assets/imgs/rk-ep.png" /></div>
      <div class="in-face left"><img src="@/assets/imgs/rk-sc.png" /></div>
      <div class="in-face right"><img src="@/assets/imgs/rk-storj.png" /></div>
      <div class="in-face top"><img src="@/assets/imgs/rk-vsys.png" /></div>
      <div class="in-face bottom"><img src="@/assets/imgs/rk-zv.png" /></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false
    }
  },
  methods: {
    onClick() {
      this.open = true
      setTimeout(() => {
        this.open = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.cube-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #fce38a, #f38181);
}

.out-cube {
  --size: min(200px, 40vw, 40vh);
  --offset: calc(var(--size) / 2);
  --open: 0px;
  width: var(--size);
  height: var(--size);
  color: #fff;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotate 14s linear infinite;
  z-index: 9;

  &.open {
    --open: 24px;
  }
}

.out-face {
  width: var(--size);
  height: var(--size);
  background: rgba(233, 102, 14, 0.5);
  box-sizing: border-box;
  border: 3px rgba(255, 255, 255, 0.8) solid;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  transition: all 0.4s;

  img {
    width: 64%;
    height: auto;
    object-fit: cover;
  }

  &.front {
    transform: translateZ(calc(var(--offset) + var(--open)));
  }

  &.back {
    transform: rotateY(180deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.left {
    transform: rotateY(-90deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.right {
    transform: rotateY(90deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.top {
    transform: rotateX(-90deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.bottom {
    transform: rotateX(90deg) translateZ(calc(var(--offset) + var(--open)));
  }
}

.in-cube {
  --size: 60px;
  --offset: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  position: absolute;
  transform-style: preserve-3d;
  animation: rotate 14s linear infinite;
  z-index: 8;
}

.in-face {
  width: var(--size);
  height: var(--size);
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 64%;
    height: auto;
    object-fit: cover;
  }

  &.front {
    transform: translateZ(var(--offset));
  }

  &.back {
    transform: rotateY(180deg) translateZ(var(--offset));
  }

  &.left {
    transform: rotateY(-90deg) translateZ(var(--offset));
  }

  &.right {
    transform: rotateY(90deg) translateZ(var(--offset));
  }

  &.top {
    transform: rotateX(-90deg) translateZ(var(--offset));
  }

  &.bottom {
    transform: rotateX(90deg) translateZ(var(--offset));
  }
}
</style>
